<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询表单 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select clearable v-model="form.departmentId" placeholder="请选择">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span
                  class="el-tag el-tag--success el-tag--mini el-tag--plain"
                  >{{ item.deptCount }}</span
                >
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input
            clearable
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input
            clearable
            v-model="form.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="70px" style="margin-left: 25px">
          <el-radio v-model="form.sex" label="0">帅哥</el-radio>
          <el-radio v-model="form.sex" label="1">美女</el-radio>
          <el-radio v-model="form.sex" label="">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input
            clearable
            v-model="form.nickname"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetUserVo"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="getUserList"
            >查询</el-button
          >
          <el-button type="success" icon="el-icon-plus" @click="show"
            >添加</el-button
          >
          <el-button type="warning" icon="el-icon-download" @click="outUserlist"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="userList" border style="width: 100%">
        <el-table-column prop="id" label="#" width="60"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="140">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "全部" }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="所属部门" width="160">
        </el-table-column>
        <el-table-column prop="birth" label="生日" width="160">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="160">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model.number="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="updateUserStatus(scope.row.id, scope.row.status)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label=" 操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              :disabled="scope.row.status == 1 ? false : true"
            >
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              :disabled="scope.row.status == 1 ? false : true"
            >
            </el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-s-tools"
              :disabled="scope.row.status == 1 ? false : true"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[4, 5, 6, 7]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departments="selectList"
        @changeShow="showAddOrUpdate"
        ref="addOrUpdateRef"
      ></UserAdd>
    </el-card>
  </div>
</template>



<script>
//引入分页查询用户的请求方法
import { getUsers, updateUserStatus, outUserlist } from "../../api/user";
//引入分页查询用户的请求方法
import { findAll } from "../../api/department";

//引入UserAdd的组件
import UserAdd from "./UserAdd.vue";
export default {
  //组件注册集
  components: {
    //UserAdd组件注册
    UserAdd,
  },
  //vue属性集
  data() {
    return {
      form: {},
      selectList: [],
      cities: [],
      value: "",
      userList: [],
      //当前页
      current: 1,
      //每页条数
      size: 7,
      //总条数
      total: 0,
      //控制显示UserAdd层的显示、
      addOrUpdateVisible: false,
    };
  },
  //vue方法集
  methods: {
    handleSizeChange(val) {
      this.size = val;
      this.getUsers(this.current, this.size, this.form);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getUsers(this.current, this.size, this.form);
    },
    onSubmit() {
      console.log("submit!");
    },
    async getUsers(a, b, c) {
      let result = await getUsers(a, b, c);
      this.userList = result.data.pageList.records;
      this.total = result.data.pageList.total;
      console.log(result);
    },
    async findAll() {
      let result = await findAll();
      this.selectList = result.data.departmentList;
      console.log(result);
    },
    //导出按钮请求时间
    async outUserlist() {
      outUserlist(this.form)
        .then((res) => {
          //这里没有返回数据,但是要在响应头中进行下载操作
          // 将二进制文件转化为可访问的url
          let url = window.URL.createObjectURL(new Blob([res]));
          //创建了一个a标签的超链接
          var a = document.createElement("a");
          //将a标签添加到body内容中
          document.body.appendChild(a);
          a.href = url;
          a.download = "用户列表.xls";
          a.click();
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {});
    },
    //重置按钮点击书剑
    resetUserVo() {
      this.form = {};
    },
    //查询按钮点击事件
    getUserList() {
      this.current = 1;
      this.getUsers(this.current, this.size, this.form);
    },
    //用户信息状态修改
    async updateUserStatus(id, status) {
      let result = await updateUserStatus(id, status);
      console.log(result);
    },
    //添加按钮点击事件，显示UserAdd层
    show() {
      this.addOrUpdateVisible = true;
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    },
  },
  //创建之后的钩子函数
  created() {
    //获取用户信息
    this.getUsers(this.current, this.size, this.form);
    //获取所有部门及其部门下的人数
    this.findAll();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb__item {
  margin: 10px;
}

.el-input {
  width: 190px;
}

.el-select {
  width: 190px;
}
</style>